<!--<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个页面</title>
		<link rel="stylesheet" type="text/css" href="css/demo.css"/>
	</head>
	<style type="text/css">
		
		
	</style>
	<body>
		<h1>big  title</h1>
		<h6>small  title</h6>
		<mark>000</mark>
		<ul>
			<li>one</li>
			<li>two</li>
			<li>three</li>
		</ul>
		<table border="1" cellspacing="0" cellpadding="3">
			<thead>
			<tr><th colspan="3">信管26班信息表</th></tr>
			</thead>
			<tbody>
				<tr>
					<td>姓名</td>
					<td>爱好</td>
					<td>学号</td>
				</tr>
				<tr>
					<td>傻强</td>
					<td>女人</td>
					<td>7533</td>
				</tr>
				<tr>
					<td>板子</td>
					<td>吃包</td>
					<td>7756</td>
				</tr>
				<tr>
					<td>二蛋</td>
					<td>足球</td>
					<td>7757</td>
				</tr>
			</tbody>
		</table>
		
		<form action="" method="get">
			姓名：<input type="text" placeholder="请输入你的姓名" name="useranme" /><br>
			密码：<input type="password" placeholder="请输入密码" name="pass"/><br>
			<input type="file" name="" id="" value="" /><br>
			<label>请选择你的职业</label>
			<input type="radio" name="a1" id="" value="top" />对抗路
			<input type="radio" name="a1" id="" value="zho" />中路
			<input type="radio" name="a1" id="" value="ad" />发育路
			<br>
			<label>你擅长的位置</label>
			<input type="checkbox" name="a2"/>射手
			<input type="checkbox" name="a2"/>坦克
			<input type="checkbox" name="a2"/>战士
			<input type="checkbox" name="a2"/>法师
			<input type="checkbox" name="a2"/>刺客
			<input type="checkbox" name="a2"/>辅助<br>
			<label>你的家乡</label>
			<select>
				<option value ="xian">西安</option>
				<option value ="xianyang">咸阳</option>
				<option value ="ankang">安康</option>
				<option value ="shangluo">商洛</option>
				<option value ="hanhzong">汉中</option>
				<option value ="weinan">渭南</option>
			</select>
			<br>
			<button class="btn1" type="submit"  >提交</button><br>
			
		</form>
		<h1>标签的组成：1：标签名称2：标签属性3：标签内容</h1>
		
		<div id="CON">
			
		<div id="div1">
		
		</div>
		<div id="div2">
			
		</div></div>
		
		
		<div class="div3">
			
		</div>
	</body>
</html>-->
<!DOCTYPE html>

 <html>
	 <head>
		 <meta charset="utf-8">
		<title>宝马</title>
	</head>
    <style type="text/css">
        .con {
            width:365px;
            height:365px;           
            background-color: #000000;
            border-radius:365px;
            border:12px solid #d3d3d3;
        } 
        .con .con1 {
            position:relative;
            border:1px solid #0f0f0f;
            width:351px;
            height:351px;
            margin-top:7px;
            margin-left:7px;
            border-radius:351px;
        }
        .con .con1 .text {
            color:#fbfbfb;
            font-size:56px;
            text-shadow:#000 0px 3px 4px;
            position:absolute;
        }
        .con .con1 .text.B {
            left: 38px;
            top: 42px;
            transform: rotate(-54deg) scaleX(1.5);
        }
        .con .con1 .text.M {
            left: 148px;
            top: -10px;         
        }
        .con .con1 .text.W {
            right: 32px;
            top: 42px;
            transform: rotate(51deg) scaleX(1.1);
        }
        .con .con1 .con2 {
            position:relative;
            width:200px;
            height:200px;
            margin-top:62.5px;
            margin-left:64.5px;
            border-radius:217px;
			border: 10px solid #d3d3d3;	
        }
        .con .con1 .con2 .c1 {
            position:absolute;
            width:100px;
            height:100px;      
            background-color: #00AAFF;
            border-radius:200px 0 0 0;             
        }
        .con .con1 .con2 .c2 {
            position:absolute;
            width:100px;
            height:100px;           
            background-color: #ffffff;
            border-radius:0 0 0 200px;       
            bottom:0px;  
        }
        .con .con1 .con2 .c3 {
            position:absolute;
            width:100px;
            height:100px;			
            background-color: #00AAFF;
            border-radius:0 0 200px 0;
            bottom:0px;
            right:0px;
        }
        .con .con1 .con2 .c4 {
            position:absolute;
            width:100px;
            height:100px;
            background-color: #ffffff;
            border-radius:0 200px 0 0; 
            right:0px;
        }
    </style>
<body>
    <div class="con">
        <div class="con1">
            <span class="text B">B</span>
            <span class="text M">M</span>
            <span class="text W">W</span>
            <div class="con2">
                <div class="c1"></div>
                <div class="c2"></div>
                <div class="c3"></div>
                <div class="c4"></div>
            </div>
        </div>
   </div>
</body>
</html>
